<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/plugins/jquerypage/css/zxf_page.css">
    <style>
        #nav_div img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }
    </style>
</head>
<body>

<!--    导航begin -->
<div class="container-fluid" id="nav_div">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">大庆师范学院</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">admin</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="/views/user/cart.html"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="/imgs/墨镜流泪.webp"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!--    导航end-->

<!--    banner-begin -->
<div class="container" style="margin-top: 10px">
    <div class="row">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/imgs/banner01.jpeg" alt="First slide">
                </div>
                <div class="item">
                    <img src="/imgs/banner02.webp" alt="Second slide">
                </div>
                <div class="item">
                    <img src="/imgs/banner03.webp" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next">&rsaquo;</a>
        </div>
    </div>
</div>
<!--    banner-end-->


<!--    搜索框begin-->
<div class="container" style="margin-top: 10px">
    <div class="row">
        <div>
            <form class="bs-example bs-example-form" role="form">
                <div class="row">
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="text" placeholder="输入产品的名称" class="form-control" id="search_word">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="search_product()" id="do_search">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </form>
        </div>
    </div>
</div>
<!--    搜索框end-->

<div class="container" style="margin-top: 10px">
    <!--        真实的数据-->
    <div class="row" id="pro_div">

    </div>
</div>

<!--    分页的标签-->
<div class="container" style="margin-top: 10px">
    <div class="row" id="page_div">

    </div>
</div>

<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/plugins/jquerypage/js/zxf_page.js"></script>
<script>
    //轮播的间隔时间
    $(function(){
        $('#myCarousel').carousel({
            interval: 2000
        })
    })

    //页面的加载 -> dom元素(标签) = dom内容
    //块中的代码是等到页面中所有的dom标签全部加载完毕之后才会执行
    //允许出现多次的
    $(function(){
        document.getElementById("do_search").click();
    })
    //展示数据 - 缩略图
    function display(arr){
        let pro_div = document.getElementById("pro_div");
        let str = ``;
        for(let i=0;i<arr.length;i++){
            str+=`<div class="col-md-3">
                     <div class="thumbnail">
                        <img src="/imgs/${arr[i].imgUrl}"
                         alt="通用的占位符缩略图">
                        <div class="caption">
                            <h3 class="text-center text-success">${arr[i].name}</h3>
                            <p class="text-center text-danger">活动价:${arr[i].price}</p>
                            <p class="text-center text-info">${arr[i].remark}</p>
                            <button type="button" class="btn btn-success center-block" onclick="add_to_cart(${arr[i].id}, '${arr[i].name}', ${arr[i].price}, '${arr[i].imgUrl}', '${arr[i].remark}')">加入购物车</button>
                        </div>
                     </div>
                    </div>`
        }
        pro_div.innerHTML = str;
    }

    function search_product() {
        //搜索按钮必须重新写下面俩个
        let page_div = $("#page_div");
        page_div.html('<div class="zxf_pagediv"></div>')
        let key_word = document.getElementById("search_word").value;
        console.log(key_word)
        $.get('/product', {name:key_word}, function(res){
            console.log(res)
            let arr = res.data.list
            //展示数据 - 封装一下
            display(arr);

            //翻页
            $(".zxf_pagediv").createPage({
                pageNum: res.data.pages,
                current: 1,
                backfun: function(e) {
                    $.get('/product',{pageNum:e.current, name:key_word},function(res){
                        display(res.data.list)
                    })
                }
            });
        })
    }

    function add_to_cart(id, name, price, img_url, remark) {
        //从本地存储中获取这个token
        let token = localStorage.getItem("token");
        console.log(token);
        //json字符串
        let datas = {id:id, name:name, price:price, imgUrl:img_url, remark:remark, token:token};
        $.post("/cart", datas, function(res){
            console.log(res);
            if (res.code == 505) {
                alert("sorry，请先登录！！！");
                window.location='index.html';
            } else if (res.code == 200) {
                // 添加购物车
                alert("已加入购物车！！！");
            } else if (res.code == 222) {
                alert("购物车中该商品的数量+1");
            } else if (res.code == 555) {
                alert("抱歉，该商品添加失败");
            }
        })
    }

</script>
</body>
</html>